<template>
  <div>
    <div>
      <el-row style="color: red">操作管理员【admin】
        <el-button type="primary" plain class="ms-auto" @click="saveNews">发布</el-button
        >
      </el-row>
    </div>
    <div>
      <el-form ref="form" :model="form" label-width="90px">
        <el-form-item label="所属类型">
          <el-select v-model="region1" placeholder="请选择大类"  @change="getSecType(region1)">
            <el-option v-for="type in topType" :label="type.categoryName"  :value="type.categoryId" :key="type.categoryId" />
          </el-select>
          <el-select v-model="form.categoryId" placeholder="请选择小类">
           <el-option v-for="type in secType" :label="type.categoryName" :value="type.categoryId" :key="type.categoryId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="新闻标题">
          <el-input
            v-model="form.newsTitle"
            style="width: 500px"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="新闻出处">
          <el-input
            v-model="form.newsFrom"
            style="width: 500px"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="新闻关键字">
          <el-input
            v-model="form.newsKey"
            style="width: 500px"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="新闻摘要">
          <el-input
            type="textarea"
            v-model="form.newsIntro"
            style="width: 500px"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload :action="uploadPath" :on-success="imgOnSuccess">
            <img v-if="form.headUrl" :src="form.headUrl" class="headImg" />
            <el-icon v-else class="headImg border"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <div class="bg-light">
      <!--工具栏区-->
      <el-affix :offset="20">
        <div id="editor-toolbar" class="shadow"></div>
      </el-affix>
      <!--内容区-->
      <div class="px-5 py-3">
        <!--内容输入区-->
        <div id="editor-container" class="note-content shadow-lg"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Plus } from "@element-plus/icons-vue";
import { baseURL } from "@/axios/axios-http.js";
import Editor from "@/editor/editor.js";
export default {
  name: "PublishAdmin",
  components: {
    Plus,
  },
  data() {
    return {
      noteId:this.$router.params.noteId,
      uploadPath: baseURL + "/api/upload",
      topType:[],
      secType:[],
      region1:null,
      form: {
        noteId:null,
        categoryId: null,
        newsFrom: null,
        newsTitle: null,
        newsKey: null,
        headUrl: null,
        newsIntro: null,
        newsContent: null
      },
    };
  },
 async mounted() {
   await this.getDetail();
     this.editor = new Editor();
    this.editor.initAll(this.news.newsContent);
    this.getType(0);
  },
  methods: {
   async getDetail() {
     await this.$axios("/api/news/detail/list?newsId=" + this.noteId)
     .then((response) => {
       let data = response.data;
       if (data.code == 200) {
         this.news = data.data;
       } else {
         alert (data.msg)
       }
     }
     );
   },
   

    saveNews() {
      this.form.newsContent = this.editor.getNewsContent();
      console.log(this.form);
      this.$axios.post("api/space/news/add", this.form).then((response) => {
        console.log(response);
        let data = response.data;
        if (data.code == 200) {
          this.$router.push("/space");
        }else{
 alert(data.msg);
        }
      });
    },
    imgOnSuccess(response) {
      let downloadUrl = response.data;
      this.form.headUrl = downloadUrl;
    },
    getType(typeId){
      this.$axios.get('/api/space/size/list?rootId='+typeId)
      .then(resp=>{
        let data = resp.data;
        if (data.code == 200) {
         this.topType = data.data
        }else{
          alert(data.msg);
        }
      })
    },
    getSecType(typeId){
      this.$axios.get('/api/space/size/list?rootId='+typeId)
      .then(resp=>{
        let data = resp.data;
        if (data.code == 200) {
         this.secType = data.data
        }else{
          alert(data.msg);
        }
      })
    }
  },
};
</script>

<style scoped>
.headImg {
  width: 5rem;
  height: 5rem;
  border-radius: 10%;
}
.note-name {
  width: 100%;
  border: none;
  outline: none;
  font-size: 3rem;
}

.note-content {
  min-height: 500px;
  background-color: #fff;
}
</style>